<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <link rel="stylesheet" href="bootstrap_3.3.0/css/bootstrap.min.css"/>
    <script src="bootstrap_3.3.0/js/jquery-1.11.1-min.js"></script>
    <script src="bootstrap_3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<%--发布文章的模态窗口--%>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">发布文章</h4>
            </div>
            <div class="modal-body">
                <form id="saveForm" action="saveArticle" method="post">
                    <div class="form-group">
                        <label>文章标题</label>
                        <input type="text" name="title" class="form-control" placeholder="请输入标题">
                    </div>
                    <div class="form-group">
                        <label>发布地址</label>
                        <input type="text" name="url" class="form-control" placeholder="请输入地址">
                    </div>
                    <div class="form-group">
                        <label>文章内容</label>
                        <textarea class="form-control" name="content" rows="3" placeholder="请输入内容"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" onclick="punish()" class="btn btn-primary">发布</button>
            </div>
        </div>
    </div>
</div>

<h1 style=" color: limegreen">欢迎您【${user.username}】
    <button class="btn btn-primary" onclick="location.href='logOut'">登出</button>
</h1>

<table style="margin: 20px auto;width: 800px;" class="table table-bordered table-hover">
    <caption><h3 style="text-align: center">文章列表数据</h3></caption>
    <tbody>
    <tr>
        <td colspan="8">
            <button class="btn btn-success" data-toggle="modal" data-target="#myModal">发布文章</button>
            <button class="btn btn-success" onclick="location.href='list?type=vote&ascOrDesc=asc'">点赞数升序
            </button>
            <button class="btn btn-success" onclick="location.href='list?type=vote&ascOrDesc=desc'">点赞数降序
            </button>
            <button class="btn btn-success" onclick="location.href='list?type=time&ascOrDesc=asc'">发布时间升序
            </button>
            <button class="btn btn-success" onclick="location.href='list?type=time&ascOrDesc=desc'">发布时间降序
            </button>
            <form class="form-inline" style="margin-top: 20px">
                <div class="form-group">
                    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="请输入文章标题">
                </div>
                <button type="submit" class="btn btn-default">查询</button>
            </form>
        </td>
    </tr>
    <tr>
        <th>
            <input type="checkbox">
        </th>
        <th>编号</th>
        <th>标题</th>
        <th>链接地址</th>
        <th>发布者</th>
        <th>发布时间</th>
        <th>点赞数</th>
        <th>操作</th>
    </tr>
    <c:forEach items="${articles}" var="article" varStatus="position">
        <tr>
            <td><input type="checkbox"></td>
            <td>${position.index}</td>
            <td>${article.title}</td>
            <td>${article.url}</td>
            <td>${article.uid}</td>
            <td>${article.pubTime}</td>
            <td id="${article.aid}">${article.votes}</td>
            <td>
                <button class="btn btn-success">删除</button>
                <button class="btn btn-primary" onclick="vote(${article.aid})">投票</button>
            </td>
        </tr>
    </c:forEach>
    </tbody>
    <tr>
        <td colspan="8">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li>
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </td>
    </tr>
</table>
</body>

<script>
    //发布文章
    function punish() {
        $('#saveForm').submit();
    }
    //投票
    function vote(aid) {
        $.get('vote', {'aid': aid}, function (data) {
            //data:ResultVo
            if (!data.ok) {
                alert(data.message);
            } else {
                //更新票数 把页面的票数+1
                $('#' + aid).text(parseInt($('#' + aid).text()) + 1);
            }
        }, 'json');
    }
</script>
</html>
